<template>
	<view>
		<view class="todo-container">
			<!-- 标题容器 -->
			<view class="title-wrap">
				<text class="title">小黑记事本</text>
				<image src="/static/记事本.png"></image>
			</view>
			<view class="todo-wrapper">
				<!-- 输入区域盒子 -->
				<view class="input-wrapper">
					<!-- 输入框 -->
					<input @confirm="AddTodo" v-model="ipt" placeholder="请输入内容" type="text" />
				</view>
				<!-- 列表区域盒子 -->
				<view class="list-wrapper">
					<!-- 列表项 -->
					<view v-for="item in lists" class="item-wrapper">
						<text class="item-text">{{ item.todo }}</text>
						<icon @tap="RemoveItem(item.id)" type="clear"></icon>
					</view>
				</view>
				<!-- 底部区域 -->
				<view class="footer-wrapper">
					<!-- 计数区域 -->
					<view class="num">{{ lists.length }} items left</view>
					<!-- 清空按钮 -->
					<view @tap="ClearAll" class="clear-btn">Clear</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';
const res = uni.getStorageSync('todolist');

//定义数据
const lists = ref(
	res || [
		{ id: 1, todo: '吃饭' },
		{ id: 2, todo: '睡觉' },
		{ id: 3, todo: '打豆豆' }
	]
);
//输入的内容
const ipt = ref('');
//实现添加功能
const AddTodo = () => {
	//如果输入的内容为空的话,不会有任何操作
	if (ipt.value === '') return;
	// console.log(ipt.value);
	//将输入的内容添加在列表的最上面
	lists.value.unshift({
		id: Date.now(),
		todo: ipt.value
	});
	//将输入的内容值为空
	ipt.value = '';
};
//实现删除功能(利用id 进行删除)
const RemoveItem = (id) => {
	lists.value = lists.value.filter((v) => v.id !== id);
};
//清空所有的列表
const ClearAll = () => {
	lists.value = [];
};
//实现持久化功能
//当数据发生改变,需要使用Watch进行侦听,然后更新数据
watch(
	lists,
	() => {
		//获取现在的数据
		uni.setStorageSync('todolist', lists.value);
	},
	{ deep: true }
);
</script>

<style>
page {
	background-color: #f5f5f5;
	padding: 0 30px;
	box-sizing: border-box;
}
.title-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
.title-wrap image {
	width: 150rpx;
	height: 150rpx;
}

.title {
	font-size: 35px;
	color: #be5959;
	display: block;
	text-align: center;
}

.todo-wrapper {
	box-shadow: 0 -1px 2px #c8c8c8;
	margin-top: 30px;
	background-color: white;
}

.input-wrapper input {
	background-color: white;
	height: 40px;
	padding-left: 10px;
}

.list-wrapper {
	border-top: 1px solid #dad8d8;
}

.list-wrapper .item-wrapper {
	height: 40px;
	display: flex;
	font-size: 18px;
	align-items: center;
	padding-left: 10px;
	position: relative;
	border-bottom: 1px solid #dad8d8;
}

.list-wrapper .item-wrapper icon {
	position: absolute;
	right: 10px;
}

.todo-wrapper .footer-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	height: 40px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-wrapper .footer-wrapper view {
	color: #808091;
	font-size: 12px;
}
.logo {
	height: 56px;
	width: 207px;
	display: block;
	margin: 50px auto;
}
</style>
